<template>
  <div>
        <h1>axios和json综合</h1>
        <input type="button" value="请求和响应都是普通字符串" @click="method01()"> <br>
        <input type="button" value="响应数据改成json字符串" @click="method02()"> <br>
        <input type="button" value="请求数据也改成json字符串" @click="method03()"> <br>
        <hr>
        <h3>好友列表</h3>
        <div id="messageDiv"></div>
        <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
            <tr>
                <!-- <th>id</th> -->
                <th>name</th>
                <th>age</th>
            </tr>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>-->
        </table>
  </div>
       
</template>

<script>
import axios from 'axios'
export default {
  methods: {
    //1.请求和响应都是普通字符串
    method01(){
       //向服务器发出请求
      //1.1定义变量保存后端地址值
     let url ="/ajaxJsonTest01Servlet";
       //1.2定义变量保存请求参数 要和实体类属性相对应
       let params = "name=柳岩&password=1234";
       //向服务端发送请求
       axios.post(url,params).then(resp =>{
          //接受服务端传递的数据
          console.log(resp.data);
       });
    },
    //2.请求是普通字符串，响应数据改成json字符串
    method02(){
         //定义变量保存后端地址
         let url = "/ajaxJsonTest02Servlet";
         //定义变量保存请求参数,要和实体类的属性相对应
         let params = "name=李沁&password=6789"
         //向浏览器发出请求
         axios.post(url,params).then(reap =>{
              //获取后端响应的数据打印到控制台
              console.log(reap.data);
         });
    },
    //3.请求是json字符串，响应数据改成json字符串
    method03(){
        //定义变量保存后端地址
        let url = "/ajaxJsonTest04Servlet";
        //定义变量保存请求参数json字符串,要和实体类属性相对应
          let params="{\"name\":\"柳岩\",\"password\":\"1234\"}";
          //向服务器发出请求
          axios.post(url,params).then(resp => {
            if(resp.data.flag){
            //获取浏览器响应的数据
            //定义一个变量接收数据数组
            let arr = resp.data.valueData;
            //定义一个变量拼接字符串
            let counts = "";
            //使用增强for循环便利数组
            for(let ele of arr){
                //拼接字符窜
                counts = counts + `<tr>
                <td>${ele.name}</td>
                <td>${ele.password}</td>
            </tr>`;
            }
            
          //把数据插入表格中
          //获取表格
          document.getElementById("messageDiv").innerHTML=resp.data.message;
          document.getElementById("myTable").innerHTML+= counts;
            }else{
                  document.getElementById("messageDiv").innerHTML=resp.data.message;
            }

          });
    }
  }
}
</script>

<style>

</style>
